<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SAMSUNG三星商城后台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../x-admin/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../x-admin/css/font.css">
    <link rel="stylesheet" href="../x-admin/css/xadmin.css">
    <link rel="stylesheet" href="../x-admin/css/htuser.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
    <script src="../x-admin/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../x-admin/js/xadmin.js"></script>

</head>
<body>
<!-- 顶部开始 -->
<div class="container">
    <div class="logo"><a href="htindex">SAMSUNG</a></div>
    <div class="open-nav"><i class="iconfont">&#xe699;</i></div>
    <ul class="layui-nav right" lay-filter="">
        <li class="layui-nav-item">
            <a href="javascript:;">admin</a>
            <dl class="layui-nav-child"> <!-- 二级菜单 -->
                <dd><a href="">个人信息</a></dd>
                <dd><a href="">切换帐号</a></dd>
                <dd><a href="login">退出</a></dd>
            </dl>
        </li>
        <li class="layui-nav-item"><a href="index">前台首页</a></li>
    </ul>
</div>
<!-- 顶部结束 -->
<!-- 中部开始 -->
<div class="zzc">
    <span onclick="cancelimg()">取消</span>
    <div class="imgbox">
        <img id="ckimg" src="img/xxxxxx/202304151621386407.jpg">
    </div>
</div>
<div class="wrapper">
    <!-- 左侧菜单开始 -->
    <div class="left-nav">
        <div id="side-nav">
            <ul id="nav">
                <li class="list" current>
                    <a href="htindex">
                        <i class="iconfont">&#xe761;</i>
                        欢迎页面
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                </li>
                <li class="list">
                    <a href="javascript:;">
                        <i class="iconfont">&#xe70b;</i>
                        商品管理
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="htgoodslist">
                                <i class="iconfont">&#xe6a7;</i>
                                商品列表
                            </a>
                        </li>
                        <li>
                            <a href="goodscategory">
                                <i class="iconfont">&#xe6a7;</i>
                                商品分类
                            </a>
                        </li>
                        <li>
                            <a href="goodsadd">
                                <i class="iconfont">&#xe6a7;</i>
                                商品添加
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                        订单管理
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu">
                        <li>
                            <a href="htorders">
                                <i class="iconfont">&#xe6a7;</i>
                                订单列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="list" >
                    <a href="javascript:;">
                        <i class="iconfont">&#xe6a3;</i>
                        用户管理
                        <i class="iconfont nav_right">&#xe697;</i>
                    </a>
                    <ul class="sub-menu" style="display:none">
                        <li>
                            <a href="/htuser">
                                <i class="iconfont">&#xe6a7;</i>
                                用户列表
                            </a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <!-- 左侧菜单结束 -->

    <!-- 右侧主体开始 -->
    <div class="page-content">
        <div class="content">
            <!-- 右侧内容框架，更改从这里开始 -->
            <form class="layui-form xbs" action="" >
                <div class="layui-form-pane" style="text-align: center;">
                    <div class="layui-form-item" style="display: inline-block;">
                        <xblock><span class="x-left" style="line-height:40px">用户列表</span></xblock>
                    </div>
                </div>
            </form>
<%--            <xblock><button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button>--%>
<%--                <button class="layui-btn" onclick="member_add('添加用户','member-add.html','600','500')" style="margin-right: 10px"><i class="layui-icon">&#xe608;</i>添加</button>--%>
                <div class="layui-input-inline">
                    <input type="text" id="username" name="username"  placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline" style="width:80px">
                    <button class="layui-btn"  lay-submit="" lay-filter="sreach" onclick="userfenye()"><i class="layui-icon">&#xe615;</i></button>
                </div>
                <span class="x-right" style="line-height:40px">共有数据：${pager.total} 条</span></xblock>
            <table id="table" class="layui-table">
                <tr>
<%--                    <th>--%>
<%--                        <input type="checkbox" name="" value="">--%>
<%--                    </th>--%>
                    <th>ID</th><th>用户名</th><th>昵称</th><th>性别</th><th>手机</th><th>生日</th>
                    <th>头像</th><th>账号</th><th>状态</th><th>操作</th>
                </tr>
                <c:forEach items="${pager.data}" var="u">
                <tr>
                    <td>
                        ${u.uid}
                    </td>
                    <td>
                        ${u.uname}
                    </td>
                    <td>
                        ${u.nickname}
                    </td>
                    <td>
                        ${u.sex}
                    </td>
                    <td>
                        ${u.uphone}
                    </td>
                    <td>
                        ${u.birth}
                    </td>
                    <td>
                        <img src="${u.upicture}" href="javascript:;" title="查看头像" onclick="chakanimg()">
                    </td>
                    <td >
                        ${u.account}
                    </td>
                    <td class="td-status">
                        <c:if test="${u.isdel==true}">
                            <span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>
                        </c:if>
                        <c:if test="${u.isdel==false}">
                            <span class="layui-btn layui-btn-disabled layui-btn-mini">已停用</span>
                        </c:if>
                    </td>
                    <td class="td-manage">
                        <c:choose>
                            <c:when test="${u.isdel==true}">
                                <a style="text-decoration:none" onclick="member_stop(this,${u.uid})" href="javascript:;" title="停用">
                                    <i class="layui-icon">&#xe601;</i>
                                </a>
                            </c:when>
                            <c:otherwise>
                                <a style="text-decoration:none" onclick="member_start(this,${u.uid})" href="javascript:;" title="启用">
                                    <i class="layui-icon">&#xe62f;</i>
                                </a>
                            </c:otherwise>
                        </c:choose>
                        <a style="text-decoration:none" onclick="resetimg(${u.uid})" href="javascript:;" title="重置">
                            <i class="layui-icon">&#xe631;</i>
                        </a>
                    </td>
                </tr>
                </c:forEach>
            </table>
            <div id="fenye">
                <span>上一页</span>
<%--                <c:forEach items="${pager.rainbow}" var="r">--%>
<%--                    <span onclick="userfenye(${r})">${r}</span>--%>
<%--                </c:forEach>--%>
                <c:forEach items="${pager.rainbow}" var="r" varStatus="x">
                    <c:choose>
                        <c:when test="${x.index==0}">
                            <span class="active" onclick="userfenye(${r})">${r}</span>
                        </c:when>
                        <c:otherwise>
                            <span onclick="userfenye(${r})">${r}</span>
                        </c:otherwise>
                    </c:choose>
                </c:forEach>
                <span ${pager.pageCount>1?"onclick='userfenye(2)'":""}>下一页</span>
            </div>
            <!-- 右侧内容框架，更改从这里结束 -->
        </div>
    </div>
    <!-- 右侧主体结束 -->
</div>
<!-- 中部结束 -->
<!-- 底部开始 -->
<%--<div class="footer">--%>
<%--    <div class="copyright">Copyright ©2017 x-admin v2.3 All Rights Reserved. 本后台系统由X前端框架提供前端技术支持</div>--%>
<%--</div>--%>
<!-- 底部结束 -->
<!-- 背景切换开始 -->
<div class="bg-changer">
    <div class="swiper-container changer-list">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img class="item" src="/x-admin/images/a.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="/x-admin/images/b.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="/x-admin/images/c.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="/x-admin/images/d.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="/x-admin/images/e.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="/x-admin/images/f.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="/x-admin/images/g.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="/x-admin/images/h.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="/x-admin/images/i.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="/x-admin/images/j.jpg" alt=""></div>
            <div class="swiper-slide"><img class="item" src="/x-admin/images/k.jpg" alt=""></div>
            <div class="swiper-slide"><span class="reset">初始化</span></div>
        </div>
    </div>
    <div class="bg-out"></div>
    <div id="changer-set"><i class="iconfont">&#xe696;</i></div>
</div>
<!-- 背景切换结束 -->
<!-- 页面动态效果 -->
<script>
    layui.use(['laydate'], function(){
        laydate = layui.laydate;//日期插件

        //以上模块根据需要引入
        //



        var start = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
        };

        var end = {
            min: laydate.now()
            ,max: '2099-06-16 23:59:59'
            ,istoday: false
            ,choose: function(datas){
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
    });

    //批量删除提交
    function delAll () {
        layer.confirm('确认要删除吗？',function(index){
            //捉到所有被选中的，发异步进行删除
            layer.msg('删除成功', {icon: 1});
        });
    }
    /*用户-添加*/
    function member_add(title,url,w,h){
        x_admin_show(title,url,w,h);
    }
    /*用户-查看*/
    function member_show(title,url,id,w,h){
        x_admin_show(title,url,w,h);
    }

    /**
     * 重置用户头像
     */
    function resetimg(id){
        var imgbox = event.currentTarget.parentNode.parentNode.children[6];
        layer.confirm('确定要重置该用户头像吗？',function (){
            $.ajax({
                url:"/htuser?v=resetImg",
                type:"post",
                data:{
                    id,
                },
                success:((resp)=>{
                    if (resp>0){
                        imgbox.innerHTML=`<img src="img/personal.png" href="javascript:;" title="查看头像" onclick="chakanimg()">`
                        layer.msg('已重置!',{icon: 5,time:1000});
                    }
                })
            })
        })
    }

    /*用户-停用*/
    function member_stop(obj,id){
        let curbtn = event.currentTarget.parentNode;
        let statusstyle = event.currentTarget.parentNode.previousSibling.previousSibling;
        layer.confirm('确认要停用吗？',function(index){
            //发异步把用户状态进行更改
            <%--$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_start(this,${u.uid})" href="javascript:;" title="启用"><i class="layui-icon">&#xe62f;</i></a>');--%>
            <%--$(obj).parents("tr").find(".td-status").html('<span class="layui-btn layui-btn-disabled layui-btn-mini">已停用</span>');--%>
            <%--$(obj).remove();--%>
            $.ajax({
                url:"/htuser",
                type: "post",
                data: {
                    "v":"updateStop",
                    id
                },
                success:(resp=>{
                    if (resp>0){
                        layer.msg('已停用!',{icon: 5,time:1000});
                        // window.setTimeout(function (){
                        //     location.href="/htuser"
                        // },500)
                    }
                })
            })
            statusstyle.innerHTML=`<span class="layui-btn layui-btn-disabled layui-btn-mini">已停用</span>`
            curbtn.innerHTML=`<a style="text-decoration:none" onClick="member_start(this,`+id+`)" href="javascript:;" title="启用"><i class="layui-icon">&#xe62f;</i></a>
                              <a style="text-decoration:none" onclick="resetimg(`+id+`)" href="javascript:;" title="重置"><i class="layui-icon">&#xe631;</i></a>`
        });
    }

    /*用户-启用*/
    function member_start(obj,id){
        let curbtn = event.currentTarget.parentNode;
        console.log(curbtn)
        let statusstyle = event.currentTarget.parentNode.previousSibling.previousSibling;
        layer.confirm('确认要启用吗？',function(index){
            //发异步把用户状态进行更改
            <%--$(obj).parents("tr").find(".td-manage").prepend('<a style="text-decoration:none" onClick="member_stop(this,${u.uid})" href="javascript:;" title="停用"><i class="layui-icon">&#xe601;</i></a>');--%>
            <%--$(obj).parents("tr").find(".td-status").html('<span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>');--%>
            <%--$(obj).remove();--%>

            $.ajax({
                url:"/htuser",
                type: "post",
                data: {
                    "v":"updateStart",
                    id
                },
                success:(resp=>{
                    if (resp>0){
                        layer.msg('已启用!',{icon: 5,time:1000});
                        // window.setTimeout(function (){
                        //     location.href="/htuser"
                        // },500)
                    }
                })
            })
            statusstyle.innerHTML=`<span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>`
            curbtn.innerHTML=`<a style="text-decoration:none" onClick="member_stop(this,`+id+`})" href="javascript:;" title="停用"><i class="layui-icon">&#xe601;</i></a>
                              <a style="text-decoration:none" onclick="resetimg(`+id+`)" href="javascript:;" title="重置"><i class="layui-icon">&#xe631;</i></a>`
        });
    }
    // 用户-编辑
    function member_edit (title,url,id,w,h) {
        x_admin_show(title,url,w,h);
    }
    /*密码-修改*/
    function member_password(title,url,id,w,h){
        x_admin_show(title,url,w,h);
    }
    /*用户-删除*/
    function member_del(obj,id){
        layer.confirm('确认要删除吗？',function(index){
            //发异步删除数据
            $(obj).parents("tr").remove();
            layer.msg('已删除!',{icon:1,time:1000});
        });
    }
</script>
<script>
    onload=function (){

    }
    function chakanimg(){
        var attribute = event.target.getAttribute("src");
        console.log(attribute)
        document.querySelector(".zzc").style.display="block"
        document.querySelector(".imgbox").innerHTML=`<img id="ckimg" src="`+attribute+`">`

    }
    function cancelimg(){
        document.querySelector(".zzc").style.display="none"
    }
    function formatDate(value) {
        var date = new Date(value);
        var y = date.getFullYear(),
            m = date.getMonth() + 1,
            d = date.getDate();
            // h = date.getHours(),
            // i = date.getMinutes(),
            // s = date.getSeconds();
        if (m < 10) { m = '0' + m; }
        if (d < 10) { d = '0' + d; }
        // if (h < 10) { h = '0' + h; }
        // if (i < 10) { i = '0' + i; }
        // if (s < 10) { s = '0' + s; }
        // var t = y + '-' + m + '-' + d + ' ' + h + ':' + i + ':' + s;
        var t = y + '-' + m + '-' + d;
        return t;
    }

    function userfenye(pageno){
        document.querySelector("#fenye").style.display="block";
        let inputvalue = document.querySelector("#username").value;
        if (isNaN(pageno)){
            pageno=1
        }
        $.ajax({
            url:"/htuser",
            type:"post",
            data:{
                "v":"userfenye",
                "pageNo":pageno,
                inputvalue
            },
            dataType:"json",
            success:((resp)=>{
                document.querySelector(".x-right").innerHTML="共有数据："+resp.pager.total+"条"
                if (resp.pager.total==0){
                    document.querySelector("#table").innerHTML="抱歉！，没有搜索到与“ "+inputvalue+" ”相关的字眼！";
                    document.querySelector("#fenye").style.display="none";
                }else {
                    let html=``;
                    resp.pager.data.forEach(u=>{
                        html+=`<tr><td> `+u.uid+` </td><td> `+u.uname+` </td><td> `+u.nickname+` </td><td> `+u.sex+` </td>
                    <td> `+u.uphone+` </td><td> `+formatDate(u.birth)+` </td><td> <img src="`+u.upicture+`"href="javascript:;" title="查看头像" onclick="chakanimg()"> </td><td >`+u.account+`</td>
                    <td class="td-status">`
                            if(u.isdel==true){
                                html+=`<span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>`
                            }else{
                                html+=`<span class="layui-btn layui-btn-disabled layui-btn-mini">已停用</span>`
                            }
                    html+=`</td>
                    <td class="td-manage">`
                        if(u.isdel==true){
                            html+=`<a style="text-decoration:none" onclick="member_stop(this,`+u.uid+`)" href="javascript:;" title="停用">
                                    <i class="layui-icon">&#xe601;</i>
                                </a><a style="text-decoration:none" onclick="resetimg(`+u.uid+`)" href="javascript:;" title="重置">
                            <i class="layui-icon">&#xe631;</i>
                        </a>`
                        }else{
                            html+=`
                            <a style="text-decoration:none" onclick="member_start(this,`+u.uid+`)" href="javascript:;" title="启用">
                                    <i class="layui-icon">&#xe62f;</i>
                             </a><a style="text-decoration:none" onclick="resetimg(`+u.uid+`)" href="javascript:;" title="重置">
                            <i class="layui-icon">&#xe631;</i>
                        </a>`
                        }
                    html+=`</td>
                </tr>`
                    })
                    let fenye=`<span `+(resp.pager.pageNo==1?"":"onclick='userfenye("+(resp.pager.pageNo-1)+")'")+`>上一页</span>`;
                    resp.pager.rainbow.forEach(r=>{
                        fenye+=`<span `+(resp.pager.pageNo==r?"class='active'":"")+`onclick="userfenye(`+r+`)">`+r+`</span>`
                    })
                    document.querySelector("#table").innerHTML=`<tr>
                    <th>ID</th><th>用户名</th><th>昵称</th><th>性别</th><th>手机</th><th>生日</th>
                    <th>头像</th><th>账号</th><th>状态</th><th>操作</th>
                </tr>`+html;
                    document.querySelector("#fenye").innerHTML=fenye+`<span `+(resp.pager.pageNo==resp.pager.pageCount?"":"onclick='userfenye("+(resp.pager.pageNo+1)+")'")+`>下一页</span>`;
                }
            })
        })
    }
</script>
</body>
</html>